<template>
    <view>
        <van-search v-model="keyword" shape="round" placeholder="请输入您想要的搜索" @search="searchChange" />
        <van-notice-bar mode="closeable" text="验证后可查看产品价格 >" color="#FF6200" background="#FFECE0" v-if="show" />
        <view class="medicalList">
            <view class="medicalList-item" v-for="item in productList" :key="item.id" @click="naClick(item.id,item.shop_id)">
                <image mode="aspectFill" :src="baseUrl + item.images" class="medicalList-item-img"></image>
                <view class="medicalList-item-title">{{ item.title }}</view>

                <view class="medicalList-item-company">{{ item.description }}</view>
            </view>

        </view>
        <van-empty description="暫无数据" v-if="productList.length == 0" />
    </view>

</template>

<script>
import { getGoodsList } from "@/api/api.js"
import baseUrl from "@/api/baseUrl";
export default {
    data() {
        return {
            baseUrl,
            main_type: 4,
            keyword: '',
            page: 1,
            limit: 50,
            productList: [],
			main_type:''
        }
    },
    onLoad(options) {
		this.main_type = options.main_type
        this.serve()
    },
    methods: {
        searchChange(e) {
            this.keyword = e.detail
            this.serve()
        },
        serve() {
            let data = {
                main_type: this.main_type,
                keyword: this.keyword,
                page: this.page,
                limit: this.limit,
            }
            getGoodsList(data).then(res => {
                if (res.code == 1) {
                    this.productList = res.data.list
                }
            })

        },
        naClick(id,shop_id) {
            uni.navigateTo({
                url: '/subCure/particulars/particulars?pay=false&id=' + id + '&shop_id=' + shop_id
            })
        }
    },
}
</script>

<style scoped lang="scss">
.medicalList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20upx 10upx;
    padding: 20upx 20upx 50upx 20upx;

    .medicalList-item {
        background-color: #fff;
        border-radius: 20upx;
        overflow: hidden;
        padding-bottom: 5upx;

        .medicalList-item-img {
            width: 350upx;
            height: 345upx;
            border-radius: 20upx 20upx 0 0;
        }

        .medicalList-item-title {
            color: #333333;
            font-size: 30upx;
            padding: 10upx 10upx;
            height: auto;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }
	
    .medicalList-item-company {
        font-size: 22upx;
        color: #A2A2A2;
        margin: 10upx;
    }
}
</style>
